<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Document</title>
    <style>
        #app1{
            width: 900px;
            height: 900px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
            margin-left: 10px;
        }
        .yellow{
            background-color: yellow;
        }
        .big{
            width: 250px;
            height: 250px;
        }
    </style>
</head>
<body>
    <div id="app1" :style="{'background':color,'height':h}">
        <div class="box" :style="styleObject"></div>
        <div class="box" :class="{yellow:isYellow}"></div>
        <div class="box" :class="classObject"></div>
        <div class="box"><img :src="url" alt="" width="200px" height="200px" @click="ChangeUrl"></div>
        <div class="box"><img :src="url2" alt="" width="200px" height="200px"></div>
    </div>
    <script>
        var app1 = new Vue({
            el:"#app1",
            data:{
                color:"green",
                h:"800px",
                isYellow:false,
                styleObject:{
                    background:"red",
                    width:"300px",
                    height:"300px"
                },
                classObject:{
                    yellow:true,
                    big:false
                },
                url:"https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=2593a906be51f819ee25054aeab54a76/d6ca7bcb0a46f21fa288717ef8246b600c33ae5a.jpg",
                url2:'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=96a23963a3345982da8ae3923cf5310b/9358d109b3de9c82d02754986281800a19d84362.jpg'
            },
            methods: {
                ChangeUrl:function(){
                    this.url = "https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=96a23963a3345982da8ae3923cf5310b/9358d109b3de9c82d02754986281800a19d84362.jpg"
                }
            },
            watch: {
                url:function(){
                    this.url2 = "https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=2593a906be51f819ee25054aeab54a76/d6ca7bcb0a46f21fa288717ef8246b600c33ae5a.jpg"
                }
            },
        })
    </script>
</body>
</html>